<template>
  <!-- 通道数据 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="渠道:" label-width="60px">
            <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
              <el-option label="全部" value="" ></el-option>
              <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="日期时间:" label-width="80px">
            <el-date-picker is-range v-model="listQuery.dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" 
            end-placeholder="结束日期" class="full-width-input time-box" :default-time="['00:00:00', '23:59:59']" :clearable="false"></el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <div class="flexDetween">
            <div>
              <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
              <el-button type="success" size="mini" icon="el-icon-refresh" :disabled="!dataList.length" @click="saveSetting">保存设置</el-button>
            </div>
            <el-button type="primary" size="mini" icon="el-icon-download" :disabled="!dataList.length" @click="$public.exportTable('通道数据报表')">导出</el-button> 
          </div>
        </template>
        <template>
          <el-table-column prop="date" label="日期时间" align="center" width="150">
            <template slot-scope="scope">
              <span v-show="!scope.$index">汇总</span>
              <span v-show="scope.$index">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="promotion_expenses" label="推广费用(卢比)" align="center" width="200">
            <template slot-scope="scope">
              <span v-show="!scope.$index">--</span>
              <el-input type="number" :min="0" v-show="scope.$index" @input="changeValue(scope.row)" v-model="scope.row.promotion_expenses" placeholder="请输入推广费用"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="channel_fee" label="通道手续费" align="center" width="200">
            <template slot-scope="scope">
              <span v-show="!scope.$index">--</span>
              <el-input type="number" :min="0"  v-show="scope.$index" @input="changeValue(scope.row)" v-model="scope.row.channel_fee" placeholder="请输入通道手续费"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="cost" label="首充成本" align="center" width="150"/>
          <el-table-column prop="report_back" label="回报率" align="center" width="150">
            <template slot-scope="scope">
              <span :class="scope.row.report_back>0?'colorGre':'colorRed'">
                {{ scope.row.report_back }}%
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="summary" label="盈亏汇总" align="center" width="150">
            <template slot-scope="scope">
              <span :class="scope.row.summary>0?'colorGre':'colorRed'">
                {{ scope.row.summary }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="today_pay_money" label="充值金额" align="center" width="150"/>
          <el-table-column prop="today_cash_money" label="提款金额" align="center" width="150"/>
          <el-table-column prop="today_create_person" label="注册人数" align="center" width="150"/>
          <el-table-column prop="today_pay_person" label="充值人数" align="center" width="150"/>
          <el-table-column prop="top_line_user_num" label="在线人数" align="center" width="150"/>
          <el-table-column prop="create_user_pay_income" label="充提差" align="center" width="150">
            <template slot-scope="scope">
              <span :class="scope.row.create_user_pay_income>0?'colorGre':scope.row.create_user_pay_income<0?'colorRed':''">{{ scope.row.create_user_pay_income }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="today_first_pay_money" label="首充金额" align="center" width="150"/>
          <el-table-column prop="today_first_pay_num" label="当天首充人数" align="center" width="150"/>
          <el-table-column prop="today_first_pay_cash_num" label="首充提款人数" align="center" width="150"/>
          <el-table-column prop="today_first_pay_cash_money" label="首充提款金额" align="center" width="150"/>
          <el-table-column prop="add_bind_parent_money" label="裂变金额" align="center" width="150"/>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getTerminal,
  setChannelFee
} from '@/api/statistics'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'channelReport',
  components: {
    SearchTable
  },
  data () {
    return {
      channelData:this.$store.state.commonState.channelDataArray,
      listQuery: {
        page: 1,
        size: 50,
        agent_id:'',
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      },
      listLoading: true,
      dataList: [],
      currentTotal: 0,
    }
  },
  created () {
    // this.getDataList();
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getDataList();
  },
  methods: {
    // 查询
    async getDataList (query) {
      let that = this,params=JSON.parse(JSON.stringify(that.listQuery));
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = []
      that.checkedItem = null
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response= await  getTerminal(params)
      that.listLoading = false
      if (response.code == 1) {
        if(response.data.list){
          response.data.list.forEach(item=>{
            item.date=item.date.substring(0,10)
            item.today_pay_money=that.$public.mathNumberDivideWan(item.today_pay_money)
            item.today_cash_money=that.$public.mathNumberDivideWan(item.today_cash_money)
            item.create_user_pay_income=that.$public.mathNumberDivideWan(item.create_user_pay_income)
            item.today_first_pay_money=that.$public.mathNumberDivideWan(item.today_first_pay_money)
            item.today_first_pay_cash_money=that.$public.mathNumberDivideWan(item.today_first_pay_cash_money)
            item.add_bind_parent_money=that.$public.mathNumberDivideWan(item.add_bind_parent_money)
            if(!item.promotion_expenses){
              item.promotion_expenses=''
            }
            if(!item.channel_fee){
              item.channel_fee=''
            }
            item.cost='' // 首充成本
            item.report_back='' // 回报率
            item.summary='' // 盈亏汇总
            if(item.promotion_expenses && item.channel_fee){
              that.changeValue(item)
            }
          })
          that.dataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 输入推广费改变盈亏
    changeValue(row){
      // 推广费用 promotion 通道手续费 channel 首充成本 cost 回报率 report_back 盈亏汇总 summary 
      // 盈亏汇总=充提差-通道手续费-推广费用    
      if(row.promotion_expenses && row.channel_fee){
        // 首充成本 = 当天首充人数/推广费用
        row.cost=this.$public.mathNumberDivide(row.today_first_pay_num,row.promotion_expenses)
        // 回报率 = 充提差/推广费用
        row.report_back=this.$public.mathNumberDividePercent(row.create_user_pay_income,row.promotion_expenses)
        // 盈亏汇总 = 充提差-通道手续费-推广费用
        row.summary=  row.create_user_pay_income - row.channel_fee - row.promotion_expenses
      }
    },
    // 保存设置的通道数据
    saveSetting(){
      let that = this,tableData=[],params=JSON.parse(JSON.stringify(that.dataList));
      params.map(item=>{
        if(item.date){
          if(!item.promotion_expenses){
            item.promotion_expenses=0
          }
          if(!item.channel_fee){
            item.channel_fee=0
          }
          tableData.push({date:item.date,agent_id:item.agent_id,promotion_expenses:Number(item.promotion_expenses),channel_fee:Number(item.channel_fee)})
        }
      })
      setChannelFee(tableData).then(res => {
        if (res.code == 1) {
          that.$message({
            type: 'success',
            message: res.msg
          })
        }
        that.getDataList()
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        agent_id:'',
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      }
      this.getDataList()
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>

</style>
